<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>调色板</title>
		<style>
.Toolbar
{
	width: 250px;
	float: left;
    font-family: "微软雅黑";
    font-size: 14px;
    text-align: center;
    background-color: #f2f7fe;
    border:1px solid #7b899b;
    padding: 10px 15px 5px 10px;
    margin-top: 1px;
    margin-bottom: 1px;
}		
img
{
	padding: 5px;
	border: 1px solid #f2f7fe;
}
img:hover{
	border: 1px solid #e4f0fe;
	background: white;
	
}
.containerCanvas{
	clear:both;
}	
button
{
	padding: 6px;
	margin: 2px 2px;
	font-size: 14px;
	background: #E4F0FE;
}
#eraser_size{
	display: none;
}

		</style>
	</head>
	<body>
		<div class="Toolbar">
			-color-<br>
			<img id="pen_red" src="img/pen_red.gif">
			<img id="pen_green" src="img/pen_green.gif">
			<img id="pen_blue" src="img/pen_blue.gif">
			<img id="pen_black" src="img/pen_black.gif">
			
		</div>
		
		
		
		<div class="Toolbar">
			-size-<br>
			<img id="pen_thin" src="img/pen_thin.gif">
			<img id="pen_medium" src="img/pen_medium.gif">
			<img id="pen_thick" src="img/pen_thick.gif">
			
		</div>
		
		
		<div class="Toolbar">
			-eraser-<br>
			<img id="eraser_thin" src="img/eraser_thin.gif">
			<img id="eraser_medium" src="img/eraser_medium.gif">
			<img id="eraser_thick" src="img/eraser_thick.gif">
			
		</div>
		
		
		<div class="Toolbar">
			-status-<br>
			<img id="pen_color" src="img/pen_red.gif">
			<img id="pen_size" src="img/pen_thin.gif">
			<img id="eraser_size" src="img/eraser_thin.gif">
			
		</div>
		<div class="containerCanvas">
			<canvas id="canvas" width="1100" height="500" style="border: 1px solid #cccccc;"></canvas>
		</div>
		
		<button id="clear">clear</button>
		<button id="save">save</button>
		
		<script>
			window.onload=function(){
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				canvas.width = 400;
				canvas.height = 300;
				var canvasx = canvas.getBoundingClientRect().left;
				var canvasy = canvas.getBoundingClientRect().top;
				console.log(canvasx);
				console.log(canvasy);
				canvas.addEventListener("mousedown", downfun);
				canvas.addEventListener("mousemove", movefun);
				canvas.addEventListener("mouseup", upfun);
				//canvas.onmousedown=function(){}
				//canvas.onmousemove=function(){}
				//canvas.onmouseup=function(){}
				var startx; //起始坐标 X
				var starty; //起始坐标 Y
				var endx; //结束坐标 X
				var endy; //结束坐标 Y
				cxt.lineWidth = 3; //设置线宽 3
				var offon = false; //锁定开关
				//鼠标按下
				function downfun(e) {
					offon = true;
					startx = e.clientX - canvasx;
					starty = e.clientY - canvasy;

				}
				//鼠标移动
				function movefun(e) {
					if(offon == true) {
						cxt.beginPath()
						endx = e.clientX - canvasx;
						endy = e.clientY - canvasy;
						cxt.moveTo(startx, starty);
						cxt.lineTo(endx, endy);
						cxt.stroke();

						startx = endx;
						starty = endy;
						console.log("1111");
					}
				}
				//鼠标离开
				function upfun() {
					offon = false;
					cxt.closePath();
				}
				//清除画面
				document.getElementById("clear").onclick = function() {
					cxt.clearRect(0, 0, canvas.width, canvas.height);
				}
				document.getElementById("save").onclick = function() {
					var url=canvas.toDataURL();
				    var a=document.createElement("a");
				    document.body.appendChild(a);
				    a.href=url;
				    a.download="画板作品";
				    a.click();
				}
				//选择画笔颜色
				document.getElementById("pen_red").onclick = function() {
					cxt.strokeStyle="red";
					document.getElementById("pen_color").src="img/pen_red.gif";
					document.getElementById("eraser_size").style.display="none";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("pen_color").style.display="red";
				}
				document.getElementById("pen_green").onclick = function() {
					cxt.strokeStyle="green";
					document.getElementById("pen_color").src="img/pen_green.gif";
					document.getElementById("eraser_size").style.display="none";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("pen_color").style.display="green";
				}
				document.getElementById("pen_blue").onclick = function() {
					cxt.strokeStyle="blue";
					document.getElementById("pen_color").src="img/pen_blue.gif";
					document.getElementById("eraser_size").style.display="none";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("pen_color").style.display="blue";
				}
				document.getElementById("pen_black").onclick = function() {
					cxt.strokeStyle="black";
					document.getElementById("pen_color").src="img/pen_black.gif";
					document.getElementById("eraser_size").style.display="none";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("pen_color").style.display="black";
				}
				//选择画笔大小
				document.getElementById("pen_thin").onclick = function() {
					cxt.lineWidth=3;
					document.getElementById("pen_size").src="img/pen_thin.gif";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("eraser_size").style.display="none";
				}
				document.getElementById("pen_medium").onclick = function() {
					cxt.lineWidth=6;
					document.getElementById("pen_size").src="img/pen_medium.gif";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("eraser_size").style.display="none";
				}
				document.getElementById("pen_thick").onclick = function() {
					cxt.lineWidth=10;
					document.getElementById("pen_size").src="img/pen_thick.gif";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";
					document.getElementById("eraser_size").style.display="none";
				}
				//选择橡皮
				document.getElementById("eraser_thin").onclick = function() {
					cxt.strokeStyle="white";
					cxt.lineWidth=3;
					document.getElementById("eraser_size").src="img/eraser_thin.gif";
					document.getElementById("pen_color").style.display="none";
					document.getElementById("pen_size").style.display="none";
					document.getElementById("eraser_size").style.display="inline";
				}
				document.getElementById("eraser_medium").onclick = function() {
					cxt.strokeStyle="white";
					cxt.lineWidth=6;	
					document.getElementById("eraser_size").src="img/eraser_medium.gif";
					document.getElementById("pen_color").style.display="none";
					document.getElementById("pen_size").style.display="none";
					document.getElementById("eraser_size").style.display="inline";
				}
				document.getElementById("eraser_thick").onclick = function() {
					cxt.strokeStyle="white";
					cxt.lineWidth=10;	
					document.getElementById("eraser_size").src="img/eraser_thick.gif";
					document.getElementById("pen_color").style.display="none";
					document.getElementById("pen_size").style.display="none";
					document.getElementById("eraser_size").style.display="inline";
			}
		}
		</script>	
	</body>
	
</html>
